<template>
    <div>
        <Card>
            <!--查询条件-->
            <Row>
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="组团">
                        <div class="filters-input">
                            <el-select v-model="filters.deviceGroup"  placeholder="请选择组团" filterable clearable no-data-text="暂无数据" @change="groupchange">
                                <el-option v-for="item in groupList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="楼栋">
                        <div class="filters-input">
                            <el-select v-model="filters.deviceBuild" @change="buildingchange" placeholder="请选择楼栋" filterable clearable no-data-text="暂无数据">
                                <el-option v-for="item in buildList" :value="item.label"
                                           :key="item.label"
                                           :label="item.label"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="单元">
                        <div class="filters-input">
                            <el-select v-model="filters.deviceUnit" placeholder="请选择单元" filterable clearable no-data-text="暂无数据">
                                <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="设备类型">
                        <el-select v-model="filters.deviceType">
                            <el-option
                                v-for="item in deviceTypeOptions"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="loadData">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <!--功能-->
            <Row>
                <Button type="primary" icon="md-add" @click="appearModal()">新增</Button>
            </Row>
            <!--数据展示-->
            <Row>
                <el-table stripe border :data="tableData">
                    <el-table-column label="设备名称" prop="deviceName"></el-table-column>
                    <el-table-column label="设备编号" prop="deviceNumber"></el-table-column>
                    <el-table-column label="设备位置">
                        <template slot-scope="scope">
                            {{scope.row.deviceGroup}}{{scope.row.deviceBuild}}{{scope.row.deviceUnit}}
                        </template>
                    </el-table-column>
                    <el-table-column label="设备类型">
                        <template slot-scope="scope">
                            <p v-if="scope.row.deviceType==1" style="color: green">围墙机</p>
                            <p v-if="scope.row.deviceType==2" style="color: dodgerblue">单元机</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="设备状态">
                        <template slot-scope="scope">
                            <p v-if="scope.row.status==1" style="color: blue">在线</p>
                            <p v-if="scope.row.status==2" style="color: red">离线</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="appearModal(scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                      id="lyPage"
                      show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                </Page>
            </Row>
        </Card>

        <Modal v-model="modalVisible" :title="modalTitle">
            <el-form :model="facialDevice" :rules="rules" ref="facialDeviceForm" label-width="100px">
                <el-form-item label="设备类型" prop="deviceType">
                    <el-select v-model="facialDevice.deviceType">
                        <el-option
                            v-for="item in deviceTypeOptions"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="deviceName">
                    <el-input v-model="facialDevice.deviceName"></el-input>
                </el-form-item>
                <el-form-item label="设备编号" prop="deviceNumber">
                    <el-input v-model="facialDevice.deviceNumber"></el-input>
                </el-form-item>
                <el-form-item label="小区" prop="housingId">
                    <el-select v-model="facialDevice.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                        <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <div v-show="this.facialDevice.deviceType==2">
                    <el-form-item label="组团">
                        <el-select v-model="facialDevice.deviceGroup" @change="groupchange" placeholder="请选择组团" filterable no-data-text="暂无数据">
                            <el-option v-for="item in groupList" :key="item.label" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋">
                        <el-select v-model="facialDevice.deviceBuild" @change="buildingchange" placeholder="请选择楼栋" filterable no-data-text="暂无数据">
                            <el-option v-for="item in buildList" :value="item.label" :key="item.label" :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元">
                        <el-select v-model="facialDevice.deviceUnit" placeholder="请选择单元" filterable no-data-text="暂无数据">
                            <el-option v-for="item in unitList" :key="item.label" :value="item.label"  :label="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="备注">
                    <el-input v-model="facialDevice.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="primary" @click="submitConfirm('facialDeviceForm')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                pageNum:1,
                pageSize:10,
                pageTotal:0,
                modalVisible:false,
                modalTitle:"",

                filters:{},
                facialDevice:{},
                rules:{
                    deviceType:[
                        {
                            required: true,
                            message: "请选择设备类型",
                        }
                    ],
                    deviceName:[
                        {
                            required: true,
                            message: "请输入设备名称",
                        }
                    ],
                    deviceNumber:[
                        {
                            required: true,
                            message: "请输入设备编号",
                        }
                    ],
                    housingId:[
                        {
                            required: true,
                            message: "请选择小区",
                        }
                    ],
                },

                tableData:[],
                houseList:[],
                groupList:[],
                buildList:[],
                unitList:[],
                deviceTypeOptions:[
                    {
                        value:1,
                        label:"围墙机",
                    },
                    {
                        value:2,
                        label:"单元机",
                    }
                ]
            }
        },

        created:function(){
            this.getHouse();
        },

        methods:{
            getHouse(){
                this.postRequest("/api/housing/getHousingByLogin").then(resp => {
                    this.houseList = resp;
                    this.filters.housingId = resp[0].id;
                    this.housechange(this.filters.housingId);
                    this.loadData();
                });
            },
            housechange(value){
                this.groupList=[];
                this.buildList=[];
                this.unitList=[];
                this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {
                    if (res.data.groupList != null) {
                        this.groupList = res.data.groupList;
                    } else if (res.data.buildList != null) {
                        this.buildList = res.data.buildList;
                    } else if (res.data.unitList != null) {
                        this.unitList = res.data.unitList;
                    }
                    this.loadData();
                });
            },
            groupchange(value){
                let housingId=this.facialDevice.housingId==null?this.filters.housingId:this.facialDevice.housingId;
                this.getRequest("/api/room/queryBuilding?groupName="+value+"&housingId="+housingId).then(resp => {
                    if (resp.data.buildList != null) {
                        this.buildList = resp.data.buildList;
                    } else if (resp.data.unitList != null) {
                        this.unitList = resp.data.unitList;
                    }
                });
            },
            buildingchange(){
                let housingId=this.facialDevice.housingId==null?this.filters.housingId:this.facialDevice.housingId;
                let params={};
                params.housingId = housingId;
                params.groupName = this.facialDevice.groupName;
                this.postRequest("/api/room/queryUnit",params).then(res => {
                    if (res.data.unitList != null) {
                        this.unitList = res.data.unitList;
                    } else {
                        this.roomList = res.data.roomList;
                    }
                });
            },
            loadData(){
                this.filters.deviceGroup=this.filters.deviceGroup==undefined?"":this.filters.deviceGroup;
                this.filters.deviceBuild=this.filters.deviceBuild==undefined?"":this.filters.deviceBuild;
                this.filters.deviceUnit=this.filters.deviceUnit==undefined?"":this.filters.deviceUnit;
                let deviceType=this.filters.deviceType==undefined?0:this.filters.deviceType;
                let param="&housingId="+this.filters.housingId+"&deviceGroup="+this.filters.deviceGroup
                    +"&deviceBuild="+this.filters.deviceBuild+"&deviceUnit="+this.filters.deviceUnit+"&deviceType="+deviceType;
                this.getRequest("/api/dfdc/deviceList?pageNum="+this.pageNum+"&pageSize="+this.pageSize+param).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageNum=resp.data.pageNum;
                        this.pageSize=resp.data.pageSize;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            appearModal(row){
                if (row==null){
                    this.facialDevice.housingId=this.filters.housingId;
                    this.modalTitle="新增";
                } else {
                    this.modalTitle="修改";
                    this.facialDevice=row;
                }
                this.modalVisible=true;
            },
            submitConfirm(form){
                this.$refs[form].validate(valid => {
                    if (valid) {
                        this.postRequest("/api/dfdc/device",this.facialDevice).then(resp=>{
                            if (resp.code==20000){
                                this.modalVisible=false;
                                this.$Message.success("操作成功");
                                this.loadData();
                            }
                        });
                    }
                });
            },
            openDelete(id){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.deleteRequest("/api/dfdc/device?id="+id).then(resp=>{
                            if (resp.code==20000){
                                this.$Message.success("删除成功");
                                this.loadData();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
